<template>
	<view>
		<view class="list">
			<view class="header">
				<image mode="aspectFill" src="@/static/img/add-icon.png" class="add-icon" @click="toPage"></image>
				<span>创建疾病风险评估</span>
				<view class="search">
					<image mode="scaleToFill" src="@/static/img/search.png"></image>
					<input type="text" placeholder="姓名" placeholder-style="color:#fff" v-model="name" @focus="nameInput('first')" @confirm="nameInput">
					<view class="selectBox" v-if="screenArr.length > 0">
						<view class="uni-list">
							<view  @click="comSearch('all')">全部</view>
							<view  v-for="(item, index) in screenArr" :key="item.value" @click="comSearch(item)">{{item.realName}}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-swipe-action  v-if="list">
				<view class="content">
					<view class="list-item" v-for="(item,index) in list" :key="index" >
						<uni-swipe-action-item :right-options="options"  @click="bindClick(item)">
							<view class="list-item-left" :style="{background:randomRgbaColor(index)}"  @click="read(item)">{{item.realName ? item.realName : item.userName}}</view>
							<view class="list-item-right"  @click="read(item)">
								<view class="info">
									<p>{{listtitle}}</p>
									<p v-for="(label,labelindex) in listLabel" :key="labelindex">{{label.name}}{{item[label.key]}}</p>
								</view>
								<span v-if="!item.status || item.status == 1" class="status not-active">待生成</span>
								<span v-else><b @click="read(item)">查看报告</b></span>
							</view>
						</uni-swipe-action-item>
					</view>
				</view>
			</uni-swipe-action>
			<view class="nulldata" style="text-align: center;font-size: 26upx;color: #ccc;padding: 20upx 0;" v-if="nullData">
				<view>没有更多数据了</view>
			</view>
			<view class="noneChating" v-if="!list">
				<image src="@/static/img/headFeature/chattingNone.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
		
		<u-modal v-model="showModal" :show-cancel-button="true" @confirm="Modalconfirm" :content="showContent"></u-modal>
	</view>
</template>

<script>
import comlist from '@/components/comlist/index.vue'	
import {filterData2} from '@/static/js/filter.js'
export default{
	components:{comlist},
	data() {
		return {
			list: [],
			options: [{
				text: '删除',
				style: {
					backgroundColor: '#EE2437' ,// 删除按钮背景  红的
				}
			}],
			listtitle:'疾病风险评估',
			listLabel:[
				{
					name:'评估编号：',
					key:'reportNo'
				},
				{
					name:'评估时间：',
					key:'reportDate'
				},
			],
			showModal:false,
			showContent:'',
			page: 1,
			nullData:false,
			deleteList:'',
			name:'',
			screenArr:[],
			SearchuserId:''
		}
	},
	onLoad() {
		this.getlist({pageSize:10,pageIndex:1,sources:3})
	},
	onReachBottom(){
		if(this.nullData == true){
			return;
		}
		this.page = this.page + 1
		this.getlist({pageSize:10,pageIndex:this.page,sources:3,userId:this.SearchuserId})
	},
	methods:{
		nameInput(e){
			const data =  {str:e == 'first'?'':e.detail.value}
			this.$api.selectMembershipList(data).then((res) => {
				if(res.data.returnCode == 200) {
					this.screenArr = res.data.result.list;
				}
			})
		},
		comSearch(e){
			this.page = 1
			this.SearchuserId = e == 'all'? '' : e.userId
			this.nullData = false
			this.name = e == 'all'?'全部': e.realName
			this.screenArr = []
			this.deleteList = 1
			this.getlist({pageIndex:this.page,pageSize:10,userId:e.userId})
		},
		filterData2,
		getlist(data){
			const _this = this;
			_this.$api.Assesslist(data).then(res=>{
				if(_this.deleteList == 1) {
					_this.list = []
					_this.list = res.data.result && res.data.result.list
					_this.deleteList = ''
				}else {
					_this.list = _this.list.concat(res.data.result && res.data.result.list)
				}		
				if(_this.list.length >= (res.data.result && res.data.result.totalCount)){
					_this.nullData = true;
				}
			})
		},
		bindClick(e){
			this.showModal = true
			this.showContent = '是否删除此疾病风险评估'
			this.delItem = e
		},
		Modalconfirm(){
			this.$api.delReportNo(this.delItem.userId,this.delItem.reportNumber).then((res)=>{
				if(res.data.returnCode == 200){
					uni.showToast({
						title:'删除成功',
						icon:'none'
					})
					this.deleteList = 1
					this.nullData = false
					this.page = 1
					this.getlist({pageSize:10,pageIndex:1,sources:3,userId:this.SearchuserId})
				}
			})
		},
		jump(item){
			!item.status || item.status == 1?
				uni.navigateTo({url:encodeURI('/pages/quickly/assessment/createreport?data='+JSON.stringify(item))})
			:
				uni.navigateTo({url:'/pages/quickly/summary/toView?id='+item.id+'&userId='+item.userId+'&userName='+item.userName})
		},
		randomRgbaColor(index) {
			var textcolor = ['#04D68F','#FF9869','#7079EA','#D17BE5'];
			var b = ''
			if(index >= 4){
				b = textcolor[index%4]; 
			}else{
				b = textcolor[index]; 
			}
			return b; //返回rgba(r,g,b,a)格式颜色
		},
		toPage(){
			uni.navigateTo({
				url: '/pages/quickly/assessment/createreport'
			})
		},
		// 查看报告
		read(item){
			window.location.href = 'http://health.jlm12580.com/web/viewer.html?file='+item.reportUrl
		},
	}
}
</script>
<style lang="scss" scoped>
	.list{
		.content{
			padding-top: 132upx;
		}
		.header{
			width: 100vw;
			padding:22upx 24upx 26upx;
			background: #38CB97;
			display: flex;
			align-items: center;
			position: fixed;
			top:88upx;
			z-index: 10;
			.add-icon{
				width: 82upx;
				height: 82upx;
				margin-right: 36upx;
			}
			span{
				flex:1;
				font-size: 36upx;
				color: #fff;
			}
			.search{
				width: 168upx;
				height: 48upx;
				background: rgba(255,255,255,.25);
				display: flex;
				align-items: center;
				image{
					width: 22upx;
					height: 22upx;
					margin-left: 17upx;
					margin-right: 13upx;
				}
				input{
					font-size: 22upx;
					flex:1;
					height: 48upx;
					color: #fff;
				}
			}
		}
		min-height: 100vh;
		background: #f8f8f8;
		&-item{
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 24upx;
			background: #fff;
			.uni-swipe{
				width: 100%;
			}
			&-left{
				margin-left: 24upx;
				margin-top: 63upx;
				width: 100upx;
				height: 100upx;
				text-align: center;
				line-height: 100upx;
				color: #fff;
				margin-right:38upx;
				border-radius: 8upx;
				font-size: 26upx;
			}
			&-right{
				margin-right: 24upx;
				flex:1;
				display: flex;
				padding:37upx 0 46upx 0;
				align-items: center;
				.info{
					flex:1;
					p{
						margin-top: 8upx;
						max-width: 486upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.status{
					font-size: 26upx;
					&.not-active{
						color: #1A85E9;
					}
					&.active{
						color: #38CB97;
					}
				}
				b{
					display: inline-block;
					width: 126upx;
					height: 46upx;
					background: #38CB97;
					border-radius:6upx;
					color: #fff;
					text-align: center;
					line-height: 46upx;
					font-weight: normal;
				}
			}
		}
		
	}
	.noneChating {
		padding-top: 280upx;
		image {
			display: block;
			margin: 0 auto;
			width: 260upx;
			height: 154upx;
		}
		view {
			margin: 24px auto;
			text-align: center;
			color: #333333;
			font-size: 13px;
		}
	}
	.selectBox {
		position: absolute;
		right: 20upx;
		top: 124upx;
		width: 88px;
		max-height: 564rpx;
		z-index: 10;
		background: #fff;
		box-shadow:0px 0px 20rpx -2rpx #bdbdbd;
		border-radius: 8upx;
		view{
			padding:4rpx 10rpx;
			overflow: hidden;
			font-size: 26upx;
			line-height: 48rpx;
		}
		.uni-list-cell {
			display: flex;
		}
	}
</style>
